<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="用户名">
        <el-input
          v-model="formInline.user"
          placeholder="请输入用户名"
        ></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input
          v-model="formInline.user"
          placeholder="请输入手机号"
        ></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="formInline.region" placeholder="">
          <el-option label="全部" value=""></el-option>
          <el-option label="启用" value="shanghai"></el-option>
          <el-option label="禁用" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="邮箱" v-if="isCollapse">
        <el-input v-model="formInline.user" placeholder="请输入邮箱"></el-input>
      </el-form-item>
      <el-form-item label="用户等级" v-if="isCollapse">
        <el-select v-model="formInline.region" placeholder="">
          <el-option label="L1" value=""></el-option>
          <el-option label="L2" value="shanghai"></el-option>
          <el-option label="L3" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="用户身份" v-if="isCollapse">
        <el-select v-model="formInline.region" placeholder="">
          <el-option label="普通用户" value=""></el-option>
          <el-option label="会员" value="shanghai"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="权益卡" v-if="isCollapse">
        <el-select v-model="formInline.region" placeholder="">
          <el-option label="plus权益卡" value=""></el-option>
          <el-option label="付费权益卡" value="shanghai"></el-option>
          <el-option label="权益卡" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="用户来源" v-if="isCollapse">
        <el-select v-model="formInline.region" placeholder="">
          <el-option label="用户名注册" value=""></el-option>
          <el-option label="公众号" value="shanghai"></el-option>
          <el-option label="小程序" value="beijing"></el-option>
          <el-option label="QQ" value="a"></el-option>
          <el-option label="微博" value="b"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="渠道来源" v-if="isCollapse">
        <el-select v-model="formInline.region" placeholder="">
          <el-option label="pc" value=""></el-option>
          <el-option label="h5" value="shanghai"></el-option>
          <el-option label="公众号" value="beijing"></el-option>
          <el-option label="小程序" value="eijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="用户标签" v-if="isCollapse">
        <el-select v-model="formInline.region" placeholder="">
          <el-option label="手动标签" value=""></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="用户类型" v-if="isCollapse">
        <el-select v-model="formInline.region" placeholder="">
          <el-option label="全部" value=""></el-option>
          <el-option label="普通用户" value=""></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="当前积分" v-if="isCollapse">
        <el-input v-model="formInline.user" placeholder=""></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">搜索</el-button>
        <el-button type="primary" v-if="!isCollapse" @click="chang"
          >展开</el-button
        >
        <el-button type="primary" v-else-if="isCollapse" @click="chang"
          >收起</el-button
        >
      </el-form-item>
    </el-form>

    <div class="buttom">
      <!-- 设置行 -->
      <div>
<el-button disabled>添加</el-button>
<el-button disabled>设置状态</el-button>
<el-button disabled>设置等级</el-button>
<el-button disabled>设置标签</el-button>
<el-button disabled>发权益卡</el-button>
<el-button disabled>设置积分</el-button>
<el-button disabled>加入黑名单</el-button>
      </div>
<!-- 多选 -->
<el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      label="用户信息"
      width="120">
     
    </el-table-column>
    <el-table-column
      prop="number"
      label="手机号"
      width="120">
    </el-table-column>
    <el-table-column
      prop="type"
      label="状态"
      show-overflow-tooltip>
    </el-table-column>
<el-table-column
      prop="quan"
      label="权益卡"
      width="120">
    </el-table-column>
<el-table-column
      prop="jifen"
      label="积分"
      sortable
      width="120">
    </el-table-column>
<el-table-column
      prop="yue"
      label="当前余额"
      sortable
      width="120">
    </el-table-column>
<el-table-column
      prop="cao"
      label="操作"
      width="120">
    </el-table-column>
<el-table-column
      prop="she"
      label=""
      width="120">
    </el-table-column>
  </el-table>

<!-- 分页功能 -->
<div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>
  </div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      isCollapse: true,
      formInline: {
        user: "",
        region: "",
      },
      tableData: [{
         
          number: '125864982',
          type: '启用',
          quan:'———',
          jifen:'488',
          yue:'1000',
          cao:'详情',
            she:'更多',
                 },
                 {
          number: '7575757982',
          type: '启用',
          quan:'———',
          jifen:'100',
          yue:'4000',
          cao:'详情',
          she:'更多'
                
                 } ],
          multipleSelection: [],
           currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    chang() {
      this.isCollapse = !this.isCollapse;
      this.topwidth = this.isCollapse ? "100%" : "";
    },
    handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
  },
};
</script>

<style scoped>
.box {
  box-shadow: 0 3px 5px gray 6px 3px 3px black;
}
.btou {
  display: flex;
  justify-content: space-between;
}
.kuang {
  margin-right: -1px;
}
.el-form {
  background-color: #fff;
}
.buttom{
  background-color: #fff;
  margin-top: 10px;
}
</style>